<template>
	<view class="popup-box" v-if="!detail">
		<view v-for="(p, index) in newPopupList" :key="index">
			<view class="cu-modal" :class="{ show: showModal && popupCurrent === index }">
				<view class="cu-dialog" style="background: none;overflow: visible;">
					<view class="img-box">
						<image class="modal-img radius" :src="p.image" mode="widthFix"></image>

						<text class="xx" v-if="time >= 1">{{ time }} s</text>
						<text class="cuIcon-roundclose xx" @tap.stop="hideModal(p)" v-else></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 广告模态框。连续弹窗和只弹一次。
 * @property {Object} newPopupList  - vuex 初始化传过来的数据
 */
import { mapMutations, mapActions, mapState } from 'vuex';
let timer = null;
export default {
	name: 'shoproNoticeModal',
	components: {},
	data() {
		return {
			popupCurrent: 0,
			showModal: true,
			screenShot: uni.getStorageSync('screenShot'),
			time: 5,
		};
	},
	props: {
		detail: false,
	},
	onLoad() {},
	onShow() {},

	computed: {
		...mapState({
			templateData: state => state.init.templateData.popup,
			showLoginTip: state => state.user.showLoginTip,
		}),

		popupData() {
			if (this.templateData) {
				return this.templateData[0].content;
			}
		},
		currentPath() {
			this.name11();
			let pages = getCurrentPages();
			let currPage = null;
			if (pages.length) {
				currPage = pages[pages.length - 1].route;
			}
			return '/' + currPage;
		},
		newPopupList() {
			if (this.popupData) {
				let arr = this.popupData.list.filter(item => {
					return item.page.includes(this.currentPath);
				});
				return arr;
			}
		},
	},
	created() {},
	methods: {
		name11() {
			const timer = setInterval(() => {
				this.time = this.time - 1;
				console.log('detail :>> ', this.detail);
				console.log('this.time :>> ', this.time);
				if (this.time <= 0) {
					clearInterval(timer);
				}
			}, 1000);
		},
		hideModal(p) {
			clearTimeout(timer);
			this.showModal = false;
			if (p.style == 1) {
				this.$store.commit('delPopup', this.currentPath);
			}
			timer = setTimeout(() => {
				this.popupCurrent += 1;
				this.showModal = true;
			}, 500);
		},
		changePopup(path) {
			this.$tools.routerTo(path, null);
		},
	},
};
</script>

<style lang="scss">
.modal-img {
	width: 610rpx;
}

.cu-modal {
	z-index: 10000;
}

.img-box {
	position: relative;

	.xx {
		position: absolute;
		left: 50%;
		transform: translate(-50%);
		bottom: -80rpx;
		color: #fff;
		font-size: 60rpx;
		z-index: 99;
	}
}
</style>
